<template>
  <div>
    <el-dialog
      title="选择登录组织机构"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
      :show-close="showClose"
      :close-on-press-escape="showClose"
    >
      <el-alert
        title="由于您的账号存在多个组织机构，请选择其中一个组织机构进行登录"
        type="warning"
        show-icon
      >
      </el-alert>

      <!-- <div class="div_box">
        <div
          v-for="item in dataList"
          :key="item.id"
          :class="
            params.orgId == item.id
              ? 'change-dept-item-box2'
              : 'change-dept-item-box'
          "
          @click="handleNodeClick(item)"
        >
          <div>{{ item.orgName }}</div>
          <div v-if="item.parentName != null && item.parentName != ''">
            上级机构名称：{{ item.parentName }}
          </div>
        </div>
      </div> -->

      <div class="div_box">
        <div
          v-for="item in dataList"
          :key="item.id"
          :class="
            params.orgId == item.id
              ? 'change-dept-item-box2'
              : 'change-dept-item-box'
          "
          @click="handleNodeClick(item)"
        >
          <div><i class="iconfont zuzhi"></i></div>
          <div>
            <div class="div_header">{{ item.orgName }}</div>
            <div
              v-if="item.parentName != null && item.parentName != ''"
              class="parentName"
            >
              上级机构：{{ item.parentName }}
            </div>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="closeDialog"
          class="cancel-button"
          v-if="showClose"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqOrgList ,reqAgencyList} from "@/api/api";
import { mapState } from "vuex";

export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      dataList: [],
      defaultProps: {
        children: "children",
        label: "orgName",
      },
      first: true, //第一次加载，点击后消除
      params: {},
      showClose: true,
    };
  },
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        // this.OrgList();
        console.log(this.$route, "this.$route");
        if (this.$route.path == "/enterprise/member") {
          this.showClose = false;
        } else {
          this.showClose = true;
        }
        this.getDataList();
        // this.params.orgId = this.spacesManage.organizationInfo.orgId;
        // this.params.orgName = this.spacesManage.organizationInfo.orgName;
      }
    },
  },
  methods: {
    handleNodeClick(data) {
      let typeName = "";
      if (data.type == "1") {
        typeName = "联网单位";
      } else if (data.type == "2") {
        typeName = "维保单位";
      } else if (data.type == "3") {
        typeName = "监管单位";
      } else if (data.type == "4") {
        typeName = "经销商";
      } else if (data.type == "5") {
        typeName = "工程商";
      } else if (data.type == "6") {
        typeName = "代理商";
      }
      this.params = {
        orgId: data.id,
        orgName: data.orgName,
        mobile: data.mobile,
        username: data.username,
        typeName: typeName,
        parentId: data.parentId,
      };
      // this.$store.commit("saveOrganizationInfo", params); //保存信息，使页面刷新信息还存在
      // this.reload(); //局部刷新
    },
    // 点击确定修改密码
    async addSubmit() {
      this.$store.commit("saveOrganizationInfo", this.params); //保存信息，使页面刷新信息还存在
      this.reload(); //局部刷新
    },
    // 树节点懒加载
    async loadNode(node, resolve) {
      if (node.level == 0) {
        // 如果是一级单位
        let params = {
          tenantId: this.user.tenantId,
          userId: this.user.userId,
          roleName: this.user.roleName,
          orgName: this.orgName,
        };
        let res = await reqOrgList( params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        let { rows } = res.data;
        rows.forEach((item) => {
          if (item.hasChildren === 1) {
            item.hasChildren = false;
          } else {
            item.hasChildren = true;
          }
        });
        if (rows.length > 0) {
          let data = {
            orgId: rows[0].id,
            orgName: rows[0].orgName,
            role: rows[0].role,
          };
          console.log("组件data", rows[0]);
          //   this.$emit("toggleOrgId", rows[0]);
        } else {
          // 组织机构筛选为空时
          let data = {
            orgId: "",
            orgName: "",
            role: 2,
          };
          this.$emit("toggleOrgId", data);
        }
        return resolve(rows);
      } else {
        // 否则是下级单位
        let params = {
          tenantId: this.user.tenantId,
          userId: this.user.userId,
          roleName: this.user.roleName,
          orgName: this.orgName,
          parentId: node.data.id,
        };
        let res = await reqOrgList( params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        let rows = res.data.rows;
        rows.forEach((item) => {
          if (item.hasChildren === 1) {
            item.hasChildren = false;
          } else {
            item.hasChildren = true;
          }
        });
        return resolve(rows);
      }
    },
    // 获取列表
    async getDataList() {
      let params = {
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        agencyName: this.orgName,
      };
      let res = await reqAgencyList( params);
      // console.log(res, "res222");
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows } = res.data;
      let unitTree = [];
      rows.forEach((item) => {
        if (item.hasChildren === 1) {
          item.hasChildren = false;
        } else {
          item.hasChildren = true;
        }
        unitTree.push({
          orgName: item.orgName,
          children: [],
          id: item.id,
          hasChildren: item.hasChildren,
          level: item.level,
          parentId: item.parentId,
          type: item.type,
          mobile: item.mobile,
          username: item.username,
          parentId: item.parentId,
          parentName: item.parentName,
        });
      });
      // console.log(unitTree, "unitTree");
      this.dataList = unitTree;

      this.params = {
        orgId: this.dataList[0].id,
        orgName: this.dataList[0].orgName,
        parentId: this.dataList[0].parentId,
        type: this.dataList[0].type,
        mobile: this.dataList[0].mobile,
        username: this.dataList[0].username,
        parentName: this.dataList[0].parentName,
      };
      // let data = {
      //         orgId: rows[0].id,
      //         orgName: rows[0].orgName,
      //         role: rows[0].role,
      //       };
      // this.$store.commit("saveOrganizationInfo", data); //保存信息，使页面刷新信息还存在
      // this.$emit("toggleOrgId", data);
    },
    // async OrgList() {
    //   var res = await reqOrgList( {
    //     userId: this.user.userId,
    //     roleName: this.user.roleName,
    //     tenantId: this.user.tenantId,
    //     orgName: "",
    //     parentId: "",
    //   });
    //   // console.log(res, "res");
    //   if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //   let { rows } = res.data;
    //   this.dataList = transTree(rows);
    //   // console.log(this.dataList);
    // },

    // 点击关闭弹框
    closeAddDialog() {
      this.dialogVisible = false;
    },
    submit() {
      this.$store.commit("saveOrganizationInfo", this.params); //保存信息，使页面刷新信息还存在
      console.log(this.user.roleName, "this.user.roleName");

      // // 判断是不是超级管理员
      if (this.user.roleName == "SUPER_ADMIN") {
        this.$router.replace({
          path: "/system/member",
        });
        return;
      }
      // 系统运维
      if (this.user.roleName == "PLATFORM_ADMIN") {
        this.$router.replace({
          path: "/tenant/list",
        });
        return;
      }
      // 租户管理员 || 单位管理员
      if (
        this.user.roleName == "TENANT_ADMIN" ||
        this.user.roleName == "ORG_ADMIN" ||
        this.user.roleName == "INSTERALL_USER"
      ) {
        this.$router.replace({
          path: "/datav",
        });
        return;
      }
      this.$router.replace({
        path: "/",
      });
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");

.div_box {
  max-height: 50vh;
  width: 100%;
  color: #fff;
  margin-top: 15px;
  overflow: auto;

  .change-dept-item-box {
    height: 50px;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
    border: 1px solid #44485e;
    border-radius: 0.375rem;
  }

  .change-dept-item-box2 {
    width: 100%;
    height: 50px;
    padding: 15px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    background: #7367f0;
    margin-bottom: 10px;
    border: 1px solid #44485e;
    border-radius: 0.375rem;
  }

  .zuzhi {
    margin-right: 10px;
  }

  .div_header {
    font-weight: 700;
    font-size: 14px;
  }

  .parentName {
    margin-top: 1px;
    font-size: 12px;
  }
}

.confirm-button {
  background: #6055ce !important;
  border: 1px solid #6055ce !important;
  color: rgba(249, 249, 249, 0.74) !important;

  &:hover {
    color: rgba(249, 249, 249, 0.94) !important;
    background: #7e74e4 !important;
    border: 1px solid #7e74e4 !important;
  }
}

// 取消按钮
::v-deep .cancel-button {
  background: #525766 !important;
  border: 1px solid #525766 !important;
  color: rgba(249, 249, 249, 0.74) !important;

  &:hover {
    color: rgba(249, 249, 249, 0.94) !important;
    background: #666d7e !important;
    border: 1px solid #666d7e !important;
  }
}
</style>
